<template>
   <div class="body">
    <div class="item">
        <div class="item-top">
            <p>Continue your plan</p>
            <el-button type="warning" round @click="goPlan">+ start new trip</el-button>
        </div>
        <div class="item-contain" @click="openplanDetail(plan)">
            <img class="img" :src="null!=plan.image?plan.image:'http://112.124.45.114:8188/profile/upload/2024/07/26/1cec5798-c02b-478d-96f4-9647ee218fdf_20240726125040A006.jpg'"/>
            <div>
                <div class="tag-item">
                    <el-tag
                    v-if="null!=plan.categories"
                    type="warning"
                    round
                    >
                   {{plan.categories}}
                    </el-tag>
                  
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="20" height="20" rx="10" fill="#CCCCCC" fill-opacity="0.5"/>
                            <path d="M10.2067 12.9368C10.0933 12.9768 9.90667 12.9768 9.79334 12.9368C8.82667 12.6068 6.66667 11.2301 6.66667 8.89678C6.66667 7.86678 7.49667 7.03345 8.52001 7.03345C9.12667 7.03345 9.66334 7.32678 10 7.78011C10.3367 7.32678 10.8767 7.03345 11.48 7.03345C12.5033 7.03345 13.3333 7.86678 13.3333 8.89678C13.3333 11.2301 11.1733 12.6068 10.2067 12.9368Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>           
                </div>
                <p  v-if="null!=plan.title">  {{plan.title}}</p>
                <p  v-if="null==plan.title"> Please Start new trip</p>
                <!-- <div class=""> -->
                    <el-progress v-if="null!=plan" :percentage="plan.percentage" color="#ff5722" ><div></div></el-progress>
                <!-- </div> -->
            </div>
        </div>
    </div>
    <div class="item">
        <div class="item-top">
            <p>Continue your Guide</p>
            <el-button type="warning" round @click="startGuid">+ start new trip</el-button>
        </div>
        <div class="item-contain" @click="openGuidDetail(Guid)">
            <img class="img" :src="null!=Guid.image?Guid.image:'http://112.124.45.114:8188/profile/upload/2024/07/26/1cec5798-c02b-478d-96f4-9647ee218fdf_20240726125040A006.jpg'"/>
            <div>
                <div class="tag-item">
                    <el-tag
                    v-if="null!=Guid.categories"
                    type="warning"
                    round
                   
                    >
                    {{Guid.categories}}
                    </el-tag>
                  
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="20" height="20" rx="10" fill="#CCCCCC" fill-opacity="0.5"/>
                            <path d="M10.2067 12.9368C10.0933 12.9768 9.90667 12.9768 9.79334 12.9368C8.82667 12.6068 6.66667 11.2301 6.66667 8.89678C6.66667 7.86678 7.49667 7.03345 8.52001 7.03345C9.12667 7.03345 9.66334 7.32678 10 7.78011C10.3367 7.32678 10.8767 7.03345 11.48 7.03345C12.5033 7.03345 13.3333 7.86678 13.3333 8.89678C13.3333 11.2301 11.1733 12.6068 10.2067 12.9368Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            
                
                </div>
                <p  v-if="null!=Guid.title">  {{Guid.title}}</p>
                <p  v-if="null==Guid.title"> Please Start new trip</p>
                <!-- <div class=""> -->
                    <el-progress v-if="null!=Guid.percentage" :percentage="Guid.percentage" color="#ff5722" ><div></div></el-progress>
                <!-- </div> -->
            </div>
        </div>
    </div>
</div>
</template>
<script setup>
    import { ref, watch, onMounted } from 'vue';

import { userGuidList } from '@/api/index';
import { useRouter } from 'vue-router';
const routers =useRouter();
// const plansParam = ref({
//       page:0,
//       size:1,
//       type:"plan"
//   })
//   const GuidParam = ref({
//       page:0,
//       size:1,
//       type:"Guid"
//   })
function openplanDetail(item) {
    if(null!=item.id){
        routers.push({
            path:'/stepTwo',
					query:{
            id:item.id
          }
				})
    }else{
        goPlan()
    }
     
}
function openGuidDetail(item) {
    if(null!=item.id){
        routers.push({
            path:'/stepTwo',
					query:{
            id:item.id
          }
				})
    }else{
        startGuid()
    }
     
}
  const Guid = ref({})
  const plan = ref({})
function getPlan(){
    userGuidList({
      page:0,
      size:1,
      type:"plan"
  }).then(res=>{
        if(res.content[0] && res.content[0].GuidEntity){
            plan.value = res.content[0].GuidEntity
            plan.value["percentage"] = compuetePercentage(plan.value)
        }
    })
}
function getGuid(){
    userGuidList({
      page:0,
      size:1,
      type:"Guid"
  }).then(res=>{
        if(res.content[0] && res.content[0].GuidEntity){
            Guid.value = res.content[0].GuidEntity
            Guid.value["percentage"] = compuetePercentage(Guid.value)
        }
    })
}
getPlan();
getGuid();

const value = ref('')


function goPlan() {
    routers.push("/plan?type=plan")
}
function startGuid() {
    routers.push("/plan?type=Guid")
}

function compuetePercentage(GuidEntity) {
        let total = 0;
        let hastrue = 0;
        if(!GuidEntity.plans){
          return 0;
        }
        for (let index = 0; index < GuidEntity.plans.length; index++) {
          let element = GuidEntity.plans[index];
          element.content.forEach(element => {
            total = total+1;
            if(element.selection){
              hastrue = hastrue+1;
            }
            return element
          });
        }
        if(hastrue==0 || total==0){
          return 0;
        }
        // 计算百分比
        let percentage = (hastrue / total) * 100;
          // 将百分比取整
          return Math.floor(percentage);
       
        
      }
    
  </script>
  <style scoped>
    .body{
        display: flex;
        justify-content: space-around;
        width: 100%;
    }
    .el-progress-bar__outer {
    background-color: #e9e9e9;
}
    .demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
   .item {
            /* border: 1px solid #ddd; */
            background-color: #e9e9e9be;
            border-radius: 15px;
            padding: 15px;
            margin: 20px;
            /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
            /* background-color: #fff; */
            /* max-width: 500px; */
            padding: 35px;
            width: 40%;
            height: 200px;
        }
        .item-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .item-top p {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
            color: #000;
        }
        .el-button {
            padding: 5px 10px;
            background-color: #FF8820;
            color: #fff;
            border: none;
            
            cursor: pointer;
        }
   
        .item-contain {
            display: flex;
        }
        .img {
            width: 100px;
            height: 80px;
            max-width: 100px;
            margin-right: 15px;
            border-radius: 5px;
        }
        .item-contain > div {
            flex-grow: 1;
        }
        .item-contain div div {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .tag {
            width: 30px;
            height: 30px;
            background-color: #ff5722;
            border-radius: 50%;
            margin-right: 10px;
        }
        .icon {
            width: 30px;
            height: 30px;
            background-color: #ffc107;
            border-radius: 50%;
        }
        .item-contain p {
            margin: 0;
            font-size: 16px;
            font-weight: bold;
        }
        .item-contain .extra {
            margin-top: 10px;
            font-size: 14px;
            color: #b4b4b4;
        }
        .tag-p{
            font-size: 8px;
        }
        .tag-item{
            justify-content: space-between;
        }
        .el-tag__content{
            color: #ff5722;
        }
  </style>
  